<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="工作台" hidden-breadcrumb>
                <div slot="content">
                    <Avatar class="dashboard-workplace-header-avatar" :src="info.avatar" />
                    <div class="dashboard-workplace-header-tip">
                        <p
                            class="dashboard-workplace-header-tip-title"
                        >早安，{{ info.name }}，开始您一天的工作吧！</p>
                        <p class="dashboard-workplace-header-tip-desc">
                            <Icon type="md-rainy" />今日阴转小雨，22℃ - 32℃，出门记得带伞哦。
                        </p>
                    </div>
                </div>
                <div slot="extra" class="dashboard-workplace-header-extra">
                    <Row type="flex" justify="center" align="middle" :gutter="12">
                        <Col span="8">
                            <p>
                                <Avatar
                                    icon="md-apps"
                                    size="small"
                                    v-color="'#40a9ff'"
                                    v-bg-color="'#e6f7ff'"
                                />
                                <span>患者数</span>
                            </p>
                            <p>1235</p>
                        </Col>
                        <Col span="8">
                            <p>
                                <Avatar
                                    icon="md-checkbox-outline"
                                    size="small"
                                    v-color="'#ffa940'"
                                    v-bg-color="'#fff7e6'"
                                />
                                <span>今日回访</span>
                            </p>
                            <p>
                                <Tooltip placement="top" content="已回访：3 / 待回访：24">3 / 24</Tooltip>
                            </p>
                        </Col>
                        <Col span="8">
                            <p>
                                <Avatar
                                    icon="md-apps"
                                    size="small"
                                    v-color="'#40a9ff'"
                                    v-bg-color="'#e6f7ff'"
                                />
                                <span>过期未回访</span>
                            </p>
                            <p>26</p>
                        </Col>
                    </Row>
                </div>
            </PageHeader>
        </div>
        <div class="i-layout-page-header">
            <PageHeader hidden-breadcrumb
                        :tab-list="tabList"
                        :tab-active-key="tabActiveKey"
                        @on-tab-change="handleChangeTab">
            </PageHeader>
        </div>
        <Row :gutter="24" class="ivu-mt">
            <Card :bordered="false" dis-hover class="ivu-mb">
                <table-form />
                <tableList />
            </Card>
        </Row>
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    import tableList from './table-list';
    import mixin from '../mixins';
    import tableForm from './table-form';
    export default {
        name: 'allocation',
        mixins: [mixin],
        components: { tableForm, tableList },
        data () {
            return {
                tabActiveKey: 'allocation',
                type: [],
                loading: false

            }
        },
        methods: {
        },
        computed: {
            ...mapState('admin/user', [
                'info'
            ])
        }
    }
</script>
<style lang="less">
.dashboard-workplace {
    &-header {
        &-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin-right: 16px;
        }
        &-tip {
            display: inline-block;
            vertical-align: middle;
            &-title {
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 12px;
            }
            &-desc {
                color: #808695;
            }
        }
        &-extra {
            .ivu-col {
                p {
                    text-align: right;
                }
                p:first-child {
                    span:first-child {
                        margin-right: 4px;
                    }
                    span:last-child {
                        color: #808695;
                    }
                }
                p:last-child {
                    font-size: 22px;
                }
            }
        }
    }
}
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
.b-phone {
    line-height: 26px;
    font-size: 12px;
}
h4 span {
    margin-left: 5px;
}
.side-bg {
    background: #f2f2f2;
    padding: 24px !important;
}
.return-form {
    padding: 24px;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 0 0 24px;
}
.sky-screen {
    margin-top: 16px;
}
</style>
<style>
.ivu-page-header-extra {
    width:360px;
}
.model .ivu-modal-body {
    padding: 0px;
}
</style>
